<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import { banner, extend, hotflow, show } from '@/api/index.js'
import { numValue, toDate, verifiedType } from '@/utils/index.js'
import CardIndex from '@/components/Card/cardIndex.vue'

const route = useRoute()
const router = useRouter()
const cardInfo = JSON.parse(sessionStorage.getItem('cardInfo'))
const id = ref(route.params.id)
const bannerPath = ref('')
const longTextContent = ref('')
const loading = ref(false)
const finished = ref(false)
let tabType = ref('comment')
let page = ref(1)

const state = reactive({
  hotflowList: [],
  attitudeList: []
})
const tabList = [
  {
    type: 'repost',
    key: 'reposts_count',
    lable: '转发'
  },
  {
    type: 'comment',
    key: 'comments_count',
    lable: '评论'
  },
  {
    type: 'attitude',
    key: 'attitudes_count',
    lable: '赞'
  }
]

const getBanner = () => {
  banner({
    position: 5
  }).then(res => {
    bannerPath.value = res.data.image
  })
}

const getExtend = () => {
  extend({
    id: id.value
  }).then(res => {
    longTextContent.value = res.data.longTextContent
  })
}

const getHotflow = () => {
  hotflow({
    id: id.value,
    mid: id.value,
    max_id_type: 0
  }).then(res => {
    state.hotflowList = res.data.data
  })
}

const currentComment = () => {
  console.log(111)
}

const clickTable = item => {
  tabType.value = item.type
  // state.hotflowList = []
  state.attitudeList = []
  page.value = 1
  if (item.type === 'attitude') {
    getShowData()
  }
}

const getShowData = async () => {
  const res = await show({
    id: id.value,
    page: page.value
  })
  if (page.value >= res.data.max) {
    finished.value = true
  }
  page.value++
  state.attitudeList.push(...res.data.data)
  loading.value = false
  return res
}

onMounted(() => {
  getBanner()
  getExtend()
  getHotflow()
})

const onLoad = async () => {
  if (tabType.value === 'comment') {
    return false
  } else if (tabType.value === 'attitude' && page.value != 1) {
    await getShowData()
    return false
  } else {
    console.log(222)
  }
}
</script>

<template>
  <div class="lite-page-wrap">
    <div class="lite-topbar lite-page-top">
      <div class="nav-left" @click="router.go(-1)">
        <van-icon name="arrow-left" class="m-font m-font-arrow-left" />
      </div>
      <div class="nav-main">
        <h4>微博正文</h4>
      </div>
      <div class="nav-right">
        <van-icon name="ellipsis" class="m-font" />
      </div>
    </div>
    <div class="main" style="margin-top: 44px">
      <CardIndex :card="cardInfo" :longTextContent="longTextContent" :banner="bannerPath" pageType="detail" />
      <div class="lite-page-tab">
        <div class="tab-item" :class="{ cur: item.type === tabType }" v-for="item in tabList" :key="item.lable"
          @click="clickTable(item)">
          <i>{{ item.lable }}<em></em></i>
          <i>{{ numValue(cardInfo.mblog[item.key]) }}</i>
        </div>
      </div>
      <div class="comment-content">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-if="tabType === 'comment'">
            <div v-for="item in state.hotflowList" :key="item" class="card m-avatar-box lite-page-list"
              @click="currentComment">
              <div class="card-wrap">
                <div class="card-main">
                  <div class="m-box">
                    <a>
                      <div class="m-img-box">
                        <img :src="item.user.profile_image_url" />
                        <i class="m-icon" :class="verifiedType(item.user)"></i>
                      </div>
                    </a>
                    <div class="m-box-col m-box-dir m-box-center lite-line">
                      <div class="m-box">
                        <div class="m-box-col m-box-dir">
                          <div class="m-text-box">
                            <h4 class="m-text-cut">
                              {{ item.user.screen_name }}
                            </h4>
                            <h3 v-html="item.text"></h3>
                            <div class="cmt-sub-txt" v-if="item.comments">
                              <p v-for="comment in item.comments" :key="comment.id">
                                <a>{{ comment.user.screen_name }}</a>
                                <span>:</span>
                                <span v-html="comment.text"></span>
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="lite-bot m-text-cut">
                        <div class="m-box-center-a time">
                          {{ toDate(item.created_at) }} {{ item.source }}
                        </div>
                        <aside>
                          <van-icon name="chat-o" class="lite-iconf" />
                          <em></em>
                        </aside>
                        <aside>
                          <van-icon name="good-job-o" class="lite-iconf" />
                          <em>{{ numValue(item.like_count) }}</em>
                        </aside>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="tabType === 'attitude'">
            <div v-for="item in state.attitudeList" :key="item" class="card m-avatar-box lite-page-list"
              @click="currentComment">
              <div class="card-wrap">
                <div class="card-main">
                  <div class="m-box">
                    <div class="m-img-box">
                      <div class="m-img-box">
                        <img :src="item.user.profile_image_url" />
                        <i class="m-icon" :class="verifiedType(item.user)"></i>
                      </div>
                    </div>
                    <div class="m-box-col m-box-dir m-box-center lite-line">
                      <div class="m-box">
                        <div class="m-box-col m-box-dir">
                          <div class="m-text-box">
                            <h4 class="m-text-cut">
                              {{ item.user.screen_name }}
                            </h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.lite-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 0;
  background-color: #fafafa;
  color: #262626;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 1px;
  border-left-width: 0;
  border-color: #e6e6e6;
  border-style: solid;
  font-size: 16px;
  z-index: 995;

  .m-font {
    color: #282f3c;
    font-size: 21px;
  }

  .nav-left,
  .nav-main,
  .nav-right,
  .nav-search {
    position: absolute;
    line-height: 44px;
  }

  .nav-left {
    left: 10px;

    .m-font-arrow-left {
      font-size: 21px;
    }
  }

  .nav-main {
    top: 0;
    right: 0;
    left: 0;
    font-size: 16px;
    color: #a5adb5;
  }

  .nav-main {
    color: #282f3c;
    font-size: 17px;
    text-align: center;
  }

  .nav-right {
    right: 10px;
  }
}

.lite-page-top {
  height: 44px;
}

.nav-left,
.nav-right {
  z-index: 100;
}

.lite-page-tab {
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  margin-top: -2px;
  background: #fff;
  box-shadow: 0 1px 0 0 #e6e6e6;
  color: #a5aeb5;
  font-size: 14px;
  z-index: 2;

  .tab-item {
    display: inline-block;
    margin-right: 24px;

    i {
      position: relative;
    }
  }

  .cur {
    color: #697480;

    em {
      display: block;
      position: absolute;
      width: 14px;
      bottom: -9px;
      left: 50%;
      margin-left: -7px;
      border-top: 2px solid #697480;
    }
  }
}

.comment-content {
  min-height: 240px;
  background-color: #fbfbfb;
  position: relative;
}

.card {
  .card-wrap {
    margin-left: 12px;
    margin-right: 12px;
    height: 100%;

    .card-main {
      >.m-box {
        height: 100%;
      }
    }
  }

  .card-main {
    box-sizing: border-box;
    margin-left: -12px;
    margin-right: -12px;
    height: 100%;
  }
}

.lite-msg .card-wrap .card-main,
.lite-page-list .card-wrap .card-main {
  margin: 0 !important;
  padding: 12px 0;
}

.m-img-box {
  display: inline-block;
  width: 100%;
}

.m-avatar-box {
  .m-img-box {
    img {
      border-radius: 50%;
    }

    &::before {
      content: '';
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 50%;
    }

    &:before {
      border-color: hsla(0, 0%, 90.2%, 0.15);
    }
  }

  .m-icon {
    position: absolute;
    z-index: 3;
    right: -1px;
    bottom: -1px;
  }
}

.m-img-box {
  border-radius: 50%;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: cover;
  }
}

.lite-msg .m-img-box,
.lite-page-list .m-img-box {
  width: 32px;
  height: 32px;
  margin: 0 8px 0 0;
}

.lite-line {
  border-top-width: 1px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-color: #e6e6e6;
  border-style: solid;
  margin: -12px -12px 0 0;
  padding: 12px 12px 0 0;
}

.lite-page-list {
  .m-text-box {
    padding-right: 0;
    font-size: 0;

    .cmt-sub-txt {
      line-height: 20px;
      padding: 8px 10px;
      background: #f7f7f7;
      color: #333;
      font-size: 14px;
      word-wrap: break-word;

      span {
        color: #333;
      }
    }
  }

  h3 {
    word-wrap: break-word;
  }

  .lite-bot {
    margin-top: 8px;
    line-height: 15px;
    font-size: 11px;
    color: #999;

    .time {
      float: left;
      height: 100%;
    }

    aside {
      float: right;

      em {
        margin-left: 3px;
      }

      +aside {
        margin-right: 14px;
      }
    }

    .lite-iconf {
      font-size: 13px;
      color: #999;
    }
  }
}

.lite-msg .m-text-box h4,
.lite-page-list .m-text-box h4 {
  font-size: 14px;
  color: #333;
  display: inline-block;
}
</style>
